<template>
  <app-section>
    <app-block title="常用服务">
      <div style="height: 1px;width: 100%;background-color: #eee"></div>
      <van-list>
        <van-cell
          v-for="(item,index) in usList"
          :key="index">
          <van-icon name="arrow" slot="right-icon" :class="'work-list-arrow'"/>
          <app-news size="small" :img="item.icon" :title="item.title" :description="item.description"></app-news>
        </van-cell>
      </van-list>
    </app-block>


    <app-block title="其他服务" style="margin-bottom:50px">
      <div style="height: 1px;width: 100%;background-color: #eee"></div>
      <van-list>
        <van-cell
          v-for="(item,index) in osList"
          :key="index">
          <van-icon name="arrow" slot="right-icon" :class="'work-list-arrow'"/>
          <app-news size="small" :img="item.icon" :title="item.title" :description="item.description"></app-news>
        </van-cell>
      </van-list>

    </app-block>
  </app-section>
</template>

<script>

  import AppBlock from '@/components/AppBlock'
  import AppSection from '@/components/AppSection'
  import AppNews from '@/components/AppNews.vue'
  import { us,os } from '@/config/work.js'

  export default {
    name: "tab-work",
    components:{
      AppNews,AppBlock,AppSection
    },
    data() {
      return {
        usList:us.data,
        osList:os.data
      }
    },
    methods: {
      detailMore(flag){
        this.$router.push({
          name:'worklist',
          params:{
            type:flag
          }
        })
      }
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .work-list-arrow:before{
    margin-top: 20px;
  }

</style>